// @flow
import React, { Component } from 'react';
import './Classifies.scss';
import ClassifyItem from 'components/Thing/ClassifyItem';
import TreeNode from 'components/Common/TreeNode';

type Props = { data: object, draggable: boolean, spanChange(): void, spanDbClickHandle(): void };

class Classifies extends Component<Props> {
    itemTender = (level = 0, pid = '') => {
        const { data, spanChange, spanDbClickHandle, type } = this.props;
        const items = data.filter(item => {
            return item.level === level && item.pid === pid;
        });
        if (!items) return;
        const NodeItems: Array<string> = [];
        items.map(item => {
            const childItems = data.filter(i => {
                return i.pid === item.id;
            });
            NodeItems.push(
                <TreeNode
                    id={`classify-${item.id}`}
                    level={item.level}
                    isDraggable={item.draggable}
                    type={type}
                    isOpen={item.isOpen}
                    index={item.index}
                    item={
                        <ClassifyItem
                            id={`classifyItem-${item.id}`}
                            isOpen={item.isOpen}
                            isLeaf={childItems.length !== 0}
                            spanChange={spanChange}
                            spanDbClickHandle={spanDbClickHandle}
                            disabled={item.disabled}
                            data={item}
                        />
                    }
                    data={item}
                    children={this.renderItems(level + 1, item.id)}
                />
            );
        });
        return NodeItems;
    };
    render() {
        return <div className="Classifies">{this.itemTender()}</div>;
    }
}

export default Classifies;
